<template>
  <div class="h-100">
    <div class="bg-blue h-100" :style="getHeight()">
      <div class="w-98 header m-auto flex align-center justify-between px-100 box-sizing">
        <div class="flex align-center">
          <img style="height: 80px; width:80px" src="@/images/gwc1.png" alt="">
          <p class="f18 f-bold c-blue ml-80 scaling">苏苏生鲜</p>
        </div>
        <p class="f18 f-bold c-blue">先去逛逛~ <a class="c-hover cp" @click="$router.push({path: '/index'})">点击这里</a></p>
      </div>
      <div class=" flex align-center justify-center box-sizing">
        <div class="loginBg flex px-40 mt-50 align-center">
          <div class="flex-1 ">
            <img class="ml-200" src="@/images/login.png" />
          </div>
          <div class="login p-20 mr-80 box-sizing">
            <div class="flex justify-between align-center">
              <p class="f18">{{ isLogin? '用户登录':'用户注册' }}</p>
              <p class="f14">{{ isLogin? '你还没有账号？' : '已有账号？请点击' }}
                <a class="ml-10 cursor-p c-blue" @click="isLogin = !isLogin">
                  {{ isLogin? '注册' : '登录' }}
                </a>
              </p>
            </div>
            <div class="mt-40 px-10">
              <Form :label-width="70" :model="userInfo" label-position="left">
              <FormItem label="用户名：" >
                <Input v-model.trim="userInfo.username" placeholder="请输入用户名"></Input>
              </FormItem>
              <FormItem>
                <label slot="label">密&ensp;&ensp;码：</label>
                <Input type="password" v-model.trim="userInfo.password" placeholder="请输入密码"></Input>
              </FormItem>
              </Form>
            </div>
            <div class="flex align-center justify-center mt-40">
              <Button @click="loginOrRegister" type="primary" class="w-80">{{ isLogin? '登录': '注册' }}</Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { goToLogin, register } from 'api'
import mixins from '@/mixins/index.js'
export default {
  mixins: [mixins],
  data() {
    return {
      userInfo: {
        username: '',
        password: ''
      },
      isLogin: true, // 是登录还是注册
      timeOut: null, // 定时器
    }
  },
  created() {
  },
  beforeDestroy () {
    clearTimeout(this.timeOut)
    this.timeOut = null
  },
  methods: {
    // 获取高度
    getHeight() {
      let autoHeight = `height: ${window.innerHeight }px`
      return autoHeight
    },
    // 登录或者注册
    loginOrRegister() {
      if (this.isLogin) {
        this.goLogin()
      } else {
        this.register()
      }
    },
    // 登录
    goLogin() {
      goToLogin(this.userInfo).then(res => {
        this.$Message.success('登录成功')
        this.setUserInfo(res)
        this.$router.go(-1)
        this.timeOut = setTimeout(() => {
          this.$router.replace({
            path: 'index'
          })
        }, 400)
      })
    },
    // 注册
    register() {
      register(this.userInfo).then(res => {
        this.$Message.success('注册成功')
        console.log(res)
        this.isLogin = true
      })
    }
  }
}
</script>

<style  scoped>
html,body{
  height: 100%;
}
.header{
  height: 120px;
  background: rgb(246,246,246);
}
.w-98{
  width: 98%;
}
.ml-80{
  margin-left: 80px;
}
.px-100{
  padding-left: 100px;
  padding-right: 100px;
}
.scaling{
  transform: scale(2);
}
.loginBg{
  width:100%;
  height: 500px;
  /* background-size: auto; */
}
.login{
  width: 380px;
  height: 320px;
  background: #fff;
  border-radius: 5px;
}
.bg-blue{
  background: rgb(27,174,174);
}
.c-blue{
  color: rgb(27,174,174);
}
.c-hover{
  color: rgb(102,177,255);
}
.c-hover:hover {
  color: rgb(71, 44, 190);
}
.ml-200{
  margin-left: 200px;
}
.cursor-p{
  cursor: pointer;
}
</style>


